import React, { Component } from 'react'
import './Falls.scss'
import Axios from 'axios'
import {withRouter} from "react-router-dom"
class Falls extends Component {
    constructor(props) {
        super(props)
        this.goodsRef = React.createRef()
        this.state = { fallsList: [] }
    }
    componentDidMount() {
        //请求商品展示数据
        Axios.get('./json/Falls.json'
        ).then(res => {
            this.setState({
                fallsList: res.data.data.list
            })

        })
    }
    goTOFallsDetails=(e) => {
        // console.log(e.target.getAttribute("data-index"))
        let UserId = e.target.getAttribute("data-index")
        // console.log(this.props)
        this.props.history.push("./fallsDetailts/" + UserId)
    }
    
    render() {
        return (
            <div className='falls' ref={this.goodsRef}>
                {this.state.fallsList && this.state.fallsList.map((v, i) => {
                    return (
                        <div className='falls-item' key={v.modelData.userId} onClick={this.goTOFallsDetails}>
                            <div className='falls-item-img'>
                                <img src={v.modelData.cover} alt="" data-index={v.modelData.userId} data-index={v.modelData.userId}/>
                            </div>
                            <div className='falls-item-text'>
                                <div className='item-text-title' data-index={v.modelData.userId}>{v.modelData.desc}</div>
                                <div className='ite-text-img' data-index={v.modelData.userId}>
                                    <img src={v.modelData.userInfo.avatar} alt="" data-index={v.modelData.userId} />
                                    <span data-index={v.modelData.userId}>{v.modelData.userInfo.name}</span>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}
export default withRouter(Falls)
